/* eslint-disable react-hooks/exhaustive-deps */
import { Button, Table, Typography } from 'antd';
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { asyncProductnameQuery } from '../../reducers/productnameInfoReducer';
import { asyncProductcolorQuery } from '../../reducers/productcolorInfoReducer';
import { asyncProductdirectionQuery } from '../../reducers/productdirectionInfoReducer';
import { asyncProductlightQuery } from '../../reducers/productlightInfoReducer';
import AddOrder from './AddOrder';
import { asyncOrderQuery, orderInfoEmpty } from '../../reducers/newOrderReducer';
const { Text } = Typography;
const columns = [
    {
        title: '序号',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
    },
    {
        title: '甲方名称',
        dataIndex: 'partaname',
        key: 'partaname',
        align: 'center',
    },
    {
        title: '产品名称',
        dataIndex: 'productname',
        key: 'productname',
        align: 'center',
    },
    {
        title: '表面处理(颜色)',
        dataIndex: 'productcolor',
        key: 'productcolor',
        align: 'center',
    },
    {
        title: '出线方向',
        dataIndex: 'productdirection',
        key: 'productdirection',
        align: 'center',
    },
    {
        title: '光源',
        dataIndex: 'productlight',
        key: 'productlight',
        align: 'center',
    },
    {
        title: '规格(mm)',
        dataIndex: 'productsize',
        key: 'productsize',
        align: 'center',
    },
    {
        title: '数量(支)',
        dataIndex: 'productnum',
        key: 'productnum',
        align: 'center',
    },
    {
        title: '单价(元/米)',
        dataIndex: 'productprice',
        key: 'productprice',
        align: 'center',
    },
    {
        title: '金额',
        dataIndex: "totalprice",
        key: 'totalprice',
        align: 'center',
    },
]
export default function Product(props) {
    let productnameList = useSelector(store => store.productnameInfo.productnameList)
    let productcolorList = useSelector(store => store.productcolorInfo.productcolorList)
    let productdirectionList = useSelector(store => store.productdirectionInfo.productdirectionList)
    let productlightList = useSelector(store => store.productlightInfo.productlightList)
    let productList = useSelector(store => store.neworder.productList)
    let dispatch = useDispatch();
    const [open, setOpen] = useState(false);

    async function getOrderlist() {
        if (props.match.params.orderid) {
            dispatch(asyncOrderQuery(props.match.params))
        } else {
            dispatch(orderInfoEmpty())
        }
    }
    useEffect(() => {
        if (!productnameList.length) {
            dispatch(asyncProductnameQuery())
        }
        if (!productcolorList.length) {
            dispatch(asyncProductcolorQuery())
        }
        if (!productdirectionList.length) {
            dispatch(asyncProductdirectionQuery())
        }
        if (!productlightList.length) {
            dispatch(asyncProductlightQuery())
        }
        getOrderlist()
    }, [])

    const showModal = () => {
        setOpen(true);
    };

    let data = productList.info.map((item, index) => {
        item.totalprice = item?.productprice * item?.productnum + '.00';
        item.partaname = (item.partaname ?? item.partaid?.partaname);
        item.id = index + 1
        return item
    })
    return (
        <div style={{ textAlign: 'start' }}>
            <Button type='primary' onClick={showModal} >新增订货单</Button>

            <Table
                rowKey={(record) => record.id ?? record.orderid}
                columns={columns}
                dataSource={data}
                pagination={false}
                bordered
                summary={(pageData) => {
                    let totalNum = 0;
                    let totalPrice = 0;
                    pageData.forEach(({ productnum, totalprice }) => {
                        totalNum += productnum * 1;
                        totalPrice += totalprice * 1;
                    });
                    return (
                        <>
                            <Table.Summary.Row >
                                <Table.Summary.Cell index={0} colSpan={7}>总计</Table.Summary.Cell>
                                <Table.Summary.Cell index={1} align='center'>
                                    <Text >{totalNum}</Text>
                                </Table.Summary.Cell>
                                <Table.Summary.Cell index={''} />
                                <Table.Summary.Cell index={2} align='center'>
                                    <Text>{totalPrice + '.00'}</Text>
                                </Table.Summary.Cell>
                            </Table.Summary.Row>
                        </>
                    );
                }}
            />

            <AddOrder
                open={open}
                setOpen={setOpen}
                props={
                    {
                        productnameList,
                        productcolorList,
                        productdirectionList,
                        productlightList
                    }
                }
            />
        </div >
    )
}
